<template>
  <div>
    <h3>ExposeDemo</h3>
    <Counter ref="childRef"></Counter>

    <input type="number" v-model="n" />
    <p>n = {{ n }}</p>
    <button @click="add(n)">+</button>
    <button @click="mul(n)">x</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Counter from "./Counter.vue";

const n = ref(0);
const childRef = ref(null);

const add = (n) => childRef.value.increase(n);
const mul = (n) => childRef.value.multiply(n);
</script>

<style lang="scss" scoped></style>
